<template>
	<view v-show="modelValue">
		<view class="necklacePopup p-3 position-center">
			<view class="necklacePopup-title f-size-20 font-weight-600 t-center">
				{{title}}
			</view>
			<view class="necklacePopup-content t-center p-3">
				{{content}}
			</view>
			<view class="necklacePopup-btns d-flex jc-around">
				<view class="necklacePopup-btns-left" @click="confirm" v-if="!onlyCancel">
					<button class="mybutton" :style="{color:confirmColor}">{{confirmText}}</button>
				</view>
				<view class="necklacePopup-btns-right" @click="close">
					<button class="mybutton" :style="{color:closeColor}">{{closeText}}</button>
				</view>
			</view>
			<slot name="note"></slot>
		</view>
		<view class="necklacePopup-mask"></view>
	</view>
</template>

<script setup>
	import {
		defineProps,
		defineEmits
	} from 'vue';
	const emit = defineEmits(['close', 'confirm'])
	const props = defineProps({
		modelValue: {
			type: Boolean,
			default: false
		},
		title: {
			type: String
		},
		content: {
			type: String
		},
		confirmText: {
			type: String,
			default: 'Yse'
		},
		closeText: {
			type: String,
			default: 'No'
		},
		confirmColor: {
			type: String,
			default: '#757587'
		},
		closeColor: {
			type: String,
			default: '#fff'
		},
		onlyCancel: {
			type: Boolean,
			default: false
		}
	})

	function confirm() {
		emit('confirm')
	}

	function close() {
		emit('close')
	}
</script>

<style lang="scss" scoped>
	.necklacePopup {
		border: 1px solid #BBBBBB;
		background-color: #fff;
		width: 80vw;
		position: fixed;
		z-index: 99;

		.necklacePopup-btns {
			view {
				width: 40%;
			}

			.necklacePopup-btns-left {
				button {
					border: 1px solid rgba(187, 187, 187, 1);
					background-color: transparent;
				}
			}

			.necklacePopup-btns-right {
				button {
					background: $uni-bg-linear;
				}
			}
		}
	}

	.necklacePopup-mask {
		background-color: rgba(0, 0, 0, .4);
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
	}
</style>